// 清除浮动，避免父盒子没有高度
@mixin clearfix {
  &::after {
    content: "";
    display: table;
    clear: both;
  }
}

/*
居中
display: flex;
align-items: center;
justify-content: center;
flex-direction: row;
*/

/*
上下/左右有两个盒子需要贴边
方法一：
display: flex;
justify-content: space-between;

方法二：
父盒子
display: flex;

子左盒子设置(子右设margin-left: auto;)
margin-right: auto;
...等等（发挥想象）
*/

// 设置位置居中
@mixin absCenter {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}




// 媒体查询
/*
0-600    Phone
600-900     Tablet portrait 
900-1200    Tablet landscape
(1200-1800   Normal styles apply)
1800 +      Big Dektop 
*/


// ORDER: Base + typography > general layout + grid > page layout > components

// sass类函数写法处理响应式布局，单位使用em(emmm为什么使用em可自行google查看一些最佳实践与探索)
@mixin respond($breakpoint) {
  @if $breakpoint ==phone {
    @media only screen and (max-width: 37.5em) {
      @content
    }
  }

  @if $breakpoint ==tab-port {
    @media only screen and (max-width: 56.25em) {
      @content
    }
  }

  @if $breakpoint ==tab-land {
    @media only screen and (max-width: 75em) {
      @content
    }
  }

  @if $breakpoint ==big-desktop {
    @media only screen and (min-width: 112.5em) {
      @content
    }
  }
}